<!doctype html>
<html>
<head>
  <title>Name Comp: Name From Content (Tentative)</title>
  <meta charset="utf-8">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>

<!--
  These aria-labelledby tests may not be valid, pending spec discussion.
  See https://github.com/w3c/accname/issues/209
-->

<!-- cross-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby</h1>
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby" class="ex">
  <a href="#" aria-labelledby="nested_image_label3">
    <span class="note" id="crossref_link">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
  </a>
  <!-- but it's picked up again in inverse order b/c of cross-referencial aria-labelledby edge case -->
  <img id="nested_image_label3" alt="image" aria-labelledby="crossref_link" src="">
</h3>

<!-- self-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby</h1>
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby" class="ex">
  <a href="#" aria-labelledby="nested_image_label4">
    <span class="note" id="crossref_link2">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
  </a>
  <!-- but it's picked up again (after the self-referencial image alt) in inverse order b/c of cross-referencial aria-labelledby edge case -->
  <img id="nested_image_label4" alt="image" aria-labelledby="nested_image_label4 crossref_link2" src="">
</h3>

<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>
